<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div class="container-left">
    <el-button
      @click="handlePush"
      style="width: 100%; margin-bottom: 25px"
      type="primary"
      icon="Plus"
      plain
      size="large"
    >
      new chat
    </el-button>
    <div
      @click="handleSwitch(item)"
      :key="item.time"
      v-for="item in state.list"
      :class="[item._id == state.curChat ? 'container-left-item-active' : '', 'container-left-item']"
    >
      <span>{{ item.sessionName }}</span>
      <el-icon @click.top="(e) => handleEdit(e, item)" class="container-left-item-edit"><EditPen /></el-icon>
      <el-icon @click.top="(e) => handleDel(e, item)" class="container-left-item-del"><Delete /></el-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, defineEmits, onMounted } from "vue"
import { ElMessageBox, ElMessage } from "element-plus"
import { getSession, createSession, updateSession, delSession } from "@/api/chat/index"
const $emit = defineEmits(["change"])
const state = reactive({
  list: [],
  curChat: undefined
})

const getData = () => {
  getSession()
    .then((res: any) => {
      if (res.code == 200) {
        state.list = res.data.list
        state.curChat = state.list[0]._id
        $emit("change", state.list[0])
      }
    })
    .catch((err: any) => {
      console.log(err)
    })
}

onMounted(() => {
  getData()
})

const handleSwitch = (item: any) => {
  state.curChat = item._id
  $emit("change", item)
}

const handlePush = () => {
  const data = { sessionName: `chat ${new Date().getTime()}` }
  createSession(data).then((res: any) => {
    if (res.code == 200) {
      getData()
      ElMessage({
        type: "success",
        message: `操作成功`
      })
    }
  })
}

const handleEdit = (e: { stopPropagation: () => void }, item: any) => {
  e.stopPropagation()
  ElMessageBox.prompt("请输入名称", "名称修改", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputValidator: (v) => !!v
  }).then(({ value }) => {
    updateSession(item._id, { ...item, sessionName: value }).then((res: any) => {
      if (res.code == 200) {
        getData()
        ElMessage({
          type: "success",
          message: `操作成功`
        })
      }
    })
  })
}

const handleDel = (e: { stopPropagation: () => void }, item: any) => {
  e.stopPropagation()
  ElMessageBox.confirm("确认删除？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  }).then(() => {
    delSession(item._id).then((res: any) => {
      if (res.code == 200) {
        getData()
        ElMessage({
          type: "success",
          message: `操作成功`
        })
      }
    })
  })
}
</script>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.container-left {
  width: 300px;
  min-width: 300px;
  height: 100%;
  background: white;
  padding: 15px 10px;
  overflow-y: scroll;
  @extend %noScrollbar;
  &-item {
    max-height: 80px;
    cursor: pointer;
    margin-bottom: 15px;
    overflow: hidden;
    word-wrap: break-word;
    padding: 15px;
    border: 1px solid var(--el-border-color);
    box-sizing: border-box;
    position: relative;
    &-del {
      position: absolute;
      right: 2px;
      top: 2px;
      color: red;
    }
    &-edit {
      position: absolute;
      right: 22px;
      top: 2px;
      color: var(--el-color-primary);
    }
    &-active {
      background: var(--el-color-primary);
      color: white;
      .container-left-item-edit,
      .container-left-item-del {
        color: white;
      }
    }
    &:hover {
      background: var(--el-color-primary-light-5);
      color: white;
      .container-left-item-del {
        color: white;
      }
      .container-left-item-edit {
        color: white;
      }
    }
  }
}
</style>
